<template>
  <div class="shop-order">

    <el-card :body-style="{ padding: '10px', height: '100%' }">
      <!-- 搜索表单 -->
      <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form">
        <el-form-item label="订单编号" prop="id">
          <el-input v-model="queryParams.id" placeholder="请输入订单编号" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email">
          <el-input v-model="queryParams.email" placeholder="请输入用户邮箱" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="交易号" prop="transactionNo">
          <el-input v-model.trim="queryParams.transactionNo" placeholder="请输入交易号" clearable
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <!-- 收货地址 -->
        <el-form-item label="收货地址" prop="receiverAddress">
          <el-input v-model="queryParams.receiverAddress" placeholder="请输入收货地址" clearable
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <!-- 时间范围 -->
        <el-form-item label="时间范围" prop="createTimeStart">
          <el-date-picker v-model="queryParams.createTimeStart" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择开始时间" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" style="width: 100%" border height="69vh">
        <el-table-column prop="id" label="订单编号" width="180" />
        <el-table-column prop="email" label="用户邮箱" width="120" />
        <!-- <el-table-column prop="userId" label="用户ID" width="100" /> -->
        <el-table-column prop="orderStatus" label="订单状态" width="120">
          <template slot-scope="scope">
            <el-tag :type="getOrderStatusType(scope.row.orderStatus)">
              {{ getOrderStatusText(scope.row.orderStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="totalAmount" label="订单总金额" width="120" />
        <el-table-column prop="actualAmount" label="实际支付金额" width="120" />
        <el-table-column prop="payMethod" label="支付方式" width="100">
          <template slot-scope="scope">
            {{ getPayMethodText(scope.row.payMethod) }}
          </template>
        </el-table-column>
        <el-table-column prop="transactionNo" label="交易号" width="180" />
        <el-table-column prop="payStatus" label="支付状态" width="120">
          <template slot-scope="scope">
            <el-tag :type="getPayStatusType(scope.row.payStatus)">
              {{ getPayStatusText(scope.row.payStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="payTime" label="支付时间" width="180" />

        <el-table-column prop="receiverPhone" label="联系电话" width="120" />
        <el-table-column prop="receiverAddress" label="收货地址" min-width="200">
          <template slot-scope="scope">
            地址： {{ scope.row.receiverAddress }}
            姓名： {{ scope.row.receiverName }}
            电话：{{ scope.row.receiverPhone }}
          </template>
        </el-table-column>
        <el-table-column prop="totalRefundAmount" label="已退款金额" width="120" />
        <el-table-column prop="createdAt" label="创建时间" width="180" />
        <el-table-column prop="updatedAt" label="更新时间" width="180" />
        <el-table-column label="操作" width="260" fixed="right">
          <template slot-scope="scope">
            <!--orderStatus 25-备货中，30-已发货，40-已完成 -->
            <el-button type="primary" size="mini" @click="handleUpdateOrderStatus(scope.row, 25)">备货中</el-button>
            <el-button type="warning" size="mini" @click="handleUpdateOrderStatus(scope.row, 30)">已发货</el-button>
            <el-button type="success" size="mini" @click="handleUpdateOrderStatus(scope.row, 40)">已完成</el-button>
            <el-button type="primary" size="mini" @click="handleViewOrder(scope.row)">订单列表</el-button>

          </template>
        </el-table-column>
      </el-table>
      <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="total"
        :page-size.sync="queryParams.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-card>

    <el-drawer title="订单商品列表" :visible.sync="orderListDrawer" size="80%">
      <el-card body-style="{padding: '20px' ">
        <el-table :data="orderItemList" style="width: 100%" border height="69vh" :header-cell-style="{
          'text-align': 'center'
        }">
          <el-table-column prop="orderId" label="订单商品编号" align="center" />
          <el-table-column prop="productName" label="商品名称" />
          <el-table-column prop="unitPrice" label="商品单价" width="80" align="right" />
          <el-table-column prop="quantity" label="商品数量" width="80" align="right" />
          <el-table-column prop="totalPrice" label="商品总价" width="80" align="right" />
          <el-table-column prop="coverUrl" label="商品图片" width="120">
            <template slot-scope="scope">
              <el-image :src="scope.row.coverUrl" fit="fill" :preview-src-list="[scope.row.coverUrl]" />
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="创建时间" width="180" align="center" />
        </el-table>
      </el-card>
    </el-drawer>

  </div>
</template>
<script>
import { getOrderList, getOrderItemList, updateOrderStatus } from '@/api/system/shopOrder';
export default {
  data() {
    return {
      tableData: [],
      orderListDrawer: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: undefined,
        email: undefined,
        transactionNo: undefined,
        receiverAddress: undefined
      },
      total: 0,
      currentOrder: {},
      orderItemList: [],
    }
  },
  created() {
    this.getOrderList();
  },
  methods: {
    handleUpdateOrderStatus(order, orderStatus) {
      console.log('更新订单状态', order);
      updateOrderStatus({ id: order.id, orderStatus: orderStatus }).then(res => {
        console.log('更新订单状态', res);
        this.getOrderList();
      })
    },
    handleViewOrder(order) {
      this.orderListDrawer = true;
      this.currentOrder = order;
      getOrderItemList({ id: order.id }).then(res => {
        console.log('订单商品列表', res.data);
        this.orderItemList = res.data;
      })
    },
    getOrderList() {
      console.log(this.queryParams.createTimeStart);
      if (this.queryParams.createTimeStart) {
        this.queryParams.startTime = this.queryParams.createTimeStart[0];
        this.queryParams.endTime = this.queryParams.createTimeStart[1];
      }
      getOrderList(this.queryParams).then(res => {
        console.log('订单列表', res.data);
        this.tableData = res.data.records;
        this.total = res.data.total;
      })
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getOrderList();
    },
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.queryParams.id = undefined;
      this.queryParams.email = undefined;
      this.queryParams.transactionNo = undefined;
      this.queryParams.receiverAddress = undefined;
      this.queryParams.createTimeStart = undefined;
      this.queryParams.startTime = undefined;
      this.queryParams.endTime = undefined;
      this.handleQuery();
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getOrderList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getOrderList();
    },
    getOrderStatusText(status) {
      // 10-待支付，20-待发货，25-备货中，30-已发货，40-已完成，50-已取消，60-退款成功
      const statusMap = {
        10: '待支付',
        20: '待发货',
        25: '备货中',
        30: '已发货',
        40: '已完成',
        50: '已取消',
        60: '退款成功'

      };
      return statusMap[status] || '未知状态';
    },
    getOrderStatusType(status) {
      const typeMap = {
        10: 'warning',
        20: 'success',
        30: 'primary',
        40: 'success',
        50: 'info',
        60: 'danger'
      };
      return typeMap[status] || 'info';
    },
    getPayMethodText(method) {
      const methodMap = {
        1: '微信',
        2: '支付宝',
        3: '银联',
        'card': '银行卡'
      };
      return methodMap[method] || '其他';
    },
    getPayStatusText(status) {
      const statusMap = {
        10: '等待支付',
        20: '支付成功',
        30: '支付失败',
        40: '已退款'
      };
      return statusMap[status] || '未知状态';
    },
    getPayStatusType(status) {
      const typeMap = {
        10: 'warning',
        20: 'success',
        30: 'danger',
        40: 'info'
      };
      return typeMap[status] || 'info';
    }
  },
};
</script>
<style scoped lang="scss">
.shop-order {
  height: 100%;
  padding: 20px;

  .search-form {
    margin-bottom: 20px;

    .el-form-item {
      margin-bottom: 10px;
    }
  }
}
</style>
